<template>
  <div class="w-[100%] h-[100%]">

    <div class="px-[16px] py-[16px] flex items-center bg-[rgba(55,33,255,0.03)] rounded-[8px]">
      <Icon icon="ep:bell-filled" color="#3721FF"/>
      <span
        class="ml-[10px] text-[#3721FF]">主要用于查看流量包使用情况及每日流量消耗情况，流量大小为负数时，代表已消耗流量超出流量包额度，套餐时间内总消耗流量=流量包大小-剩余流量</span>
    </div>

    <div class="mt-[30px]">
      <QueryTable
        :list="dataList"
        :total="total"
        :btns="tableBtnList"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="true"
        :show-section="false"
      >
        <template #state="{row}">
          <div :style="`color:${ flowStatus.find(at=>{
              return at.value == row.state
            })?.color }`">{{ flowStatus.find(at=>{
            return at.value == row.state
          })?.label }}</div>
        </template>

        <template #flowType="{row}">
          <div>{{ flowType.find(at=>{
            return at.value == row.flowType
          })?.label }}</div>
        </template>

        <template #residualFlow="{row}">
          <div>{{ Math.floor((row.residualFlow/(1024*1024))*100)/100 }}GB</div>
        </template>

        <template #trafficSize="{row}">
          <div>{{ Math.floor((row.trafficSize/(1024*1024))*100)/100 }}GB</div>
        </template>
      </QueryTable>

    </div>
    <InfoAction v-model="isShowDialog" :info="selectedRow"/>
  </div>
</template>
<script setup lang="ts">
import Icon from "@/components/Icon/src/Icon.vue"
import QueryTable from "@/components/TableData/index.vue"
import ImagePreview from "@/components/ImagePreview/index.vue"
import InfoAction from "./components/InfoAction.vue";
import type {TradeOrderQueryVO} from "@/api/mall/trade/order";
import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
import type {PurchaseAdvice} from "@/api/purchase/advice/type";
import {throttle, confirmPromote} from "@/utils";
import PurchaseLink from "@/views/purchase/advice/components/PurchaseLink.vue";
import {FlowApi} from "@/api/fee/flow";

import {flowStatus} from "@/utils"

const flowType =  getStrDictOptions(DICT_TYPE.FLOW_TYPE)

console.log(flowType,"66")

const initQueryParams = {
  pageNo: 1, pageSize: 10
}

const tableBtnList = ref([
  {
    color: '#3721FF',
    code: 'edit',
    name: '详情'
  },
]);


const th = ref([
  {
    name: '流量包类型',
    code: 'flowType',
    type: 'numberRanger',
    search: true
  },
  {
    name: '流量包有效期',
    code: 'endTime',
    date: true
  },
  {
    name: '流量包大小（G）',
    code: 'trafficSize',
    search: false
  },
  {
    name: '剩余流量大小（G）',
    code: 'residualFlow',
    search: false
  },
  {
    name: '状态',
    code: 'state',
  },
]);
const dataList = ref<PurchaseAdvice[]>([]);
const ids = ref<Array<string | number>>([]);
const total = ref(0);

const initRow = {
  cover: null,
  sku: null,
  spec: null,
  name: null,
  productId: null,
  advice: null,
  occupy: null,
  stock: null,
  inTransit: null,
  noAuditInTransit: null,
}

const selectedRow = ref<PurchaseAdvice>({...initRow})

const isShowDialog = ref(false)


const queryParams = ref({
  ...initQueryParams
})

const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  console.log(val, 'handleSearchQuery')
}

const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  pagination(){
    queryList();
  },
  edit({data}) {
    selectedRow.value = data.row;
    isShowDialog.value = true
  },
}

const queryList = async () => {
  let res = await FlowApi.getFlowPage(queryParams.value);
  dataList.value = res.list;
  total.value = res.total;
}


onMounted(() => {
  queryList()
})


</script>
<style lang="scss" scoped>

</style>
